<template>
	<view class="common-cart">
		<view v-if="list.length < 1">
			<u-empty text="你的购物车是空的,赶紧去逛逛吧~" mode="car">
				<view slot="bottom" class="toIndexBtn" @tap="toIndex">去逛逛</view>
			</u-empty>
		</view>
		<view class="shop-cart" v-if="list.length > 0">
			<!-- 购物车 start -->
			<view class="store-box">
				<u-swipe-action class="swipeAction" v-for="(itemq,indexq) in list" :key="itemq.id"
					:btn-width="btnWidth" :options="options" :index="indexq" :show="itemq.show" @click="click" @open="open">
					<view class="goodsInfo">
						<u-icon class="checked-image" size="40" :color="itemq.is_checked === 0 ? 'grey' : 'red'"
							 @tap="goodsCheck(indexq)" :name="itemq.is_checked === 0 ? 'checkmark-circle' : 'checkmark-circle-fill'"
						></u-icon>
						<!-- <u-icon class="checked-image" v-if="itemq.is_checked === 1" size="40" name="checkmark-circle-fill" color="red"
							@tap="goodsCheck(indexq,0)"
						></u-icon> -->
						<view class="goodsInfo-right">
							<image :src="itemq.goods.cover_url" class="goods-image" mode=""></image>
							<view class="goodsInfo-box">
								<text class="goods-name">{{itemq.goods.title}}</text>
								<text class="spe">库存：{{itemq.goods.stock}}</text>
								<view class="goods-box">
									<text class="goods-price">¥{{itemq.goods.price}}</text>
									<view class="goods-num-box">
										<u-number-box :input-width="60" :input-height="60" @change="numChange"
											:step="1" :min="1" :max="9" v-model="itemq.num" :index="indexq"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action>
			</view>
			<!-- 购物车 end -->
			
			<!-- 底部bar start -->
			<view :class="{android: isAndroid}" class="statistics-box">
				<view class="statistics">
					<u-icon class="statistics-left" v-if="!allCheck" label="全选" label-size="30" 
						name="checkmark-circle" size="48" color="grey" @tap="setAllCheck"
					></u-icon>
					<u-icon class="statistics-left" v-if="allCheck" label="全选" label-size="30" 
						name="checkmark-circle-fill" size="48" color="red" @tap="setAllCheck"
					></u-icon>
					<view class="statistics-right">
						<text>总计：</text><text class="text-color">¥{{totalPrice}}</text>
						<view class="btn" @tap="accounts">
							<text>结算</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部bar end -->
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"shop-car",
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				btnWidth:120,
				delIndex:0,
				isAndroid: false
			};
		},
		props: {
			list: {
				type: Array,
				default(){
					return []
				} 
			}
		},
		created() {
			const res = this.$u.utils.systemInfo();
			this.isAndroid = res.platform == 'android';
		},
		mounted() {
			// this.list = this.dataList
		},
		methods: {
			// 数量改变
			async numChange(e){
				let cartId = this.list[e.index].id;
				await this.$u.api.cartsCountChange({cart: cartId, data: {num:e.value}}) 
			},
			// 选中商品
			goodsCheck(indexq){
				this.$emit('goodsCheck', indexq);
			},
			//全选
			setAllCheck(){
				this.$emit('setAllCheck', this.allCheck);
			},
			async click(index, index1) {
				this.$emit('click', index)
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				this.$emit('open', index)
			},
			/**
			 * 结算
			 */
			accounts(){
				this.$emit('accounts')
			},
			toIndex(){
				this.$u.route({
					type: 'reLaunch',
					url: 'pages/index/index'
				})
			}
		},
		computed: {
			allCheck(){
				let checked = true;
				this.list.filter((item) => {
					if(item.is_checked == 0) checked = false;
					return checked;
				})
				return checked;
			},
			
			totalPrice(){
				let total = 0
				this.list.forEach((item) => {
					if(item.is_checked == 1){
						total += item.num * item.goods.price;
					}
				})
				return total
			}
		}
	}
</script>

<style lang="scss" scoped>
	.common-cart {
		width: 750rpx;
		//min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F5F5F5;
		.toIndexBtn {
			text-align: center;
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}
	.swipeAction {
		width: 742rpx;
	}
	.shop-cart {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.store-box{
			width: 100%;
			margin-bottom: 88rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
			
			.goodsInfo {
				width: 95%;
				height: 246rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 2rpx solid #EDEDED;
			
				&:nth-last-child(1) {
					border: none;
				}
			
				.checked-image {
					width: 36rpx;
					height: 36rpx;
				}
			
				.goodsInfo-right {
					width: 634rpx;
					height: 246rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
			
					.goods-image {
						width: 180rpx;
						height: 180rpx;
					}
			
					.goodsInfo-box {
						width: 428rpx;
						margin-left: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
			
						.goods-name {
							width: 428rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: #313133;
						}
			
						.spe {
							width: 428rpx;
							margin-top: 10rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #919298;
						}
			
						.goods-box {
							width: 428rpx;
							margin-top: 18rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
			
							.goods-price {
								font-size: 32rpx;
								font-weight: 400;
								color: #313133;
							}
			
							.goods-num-box {
								width: 200rpx;
								height: 46rpx;
								display: flex;
								padding-right: 6rpx;
								flex-direction: row;
								align-items: center;
							}
						}
					}
				}
			}
		}
		
		.android{
			bottom: 0 !important;
			left: 0 !important;
		}
		.statistics-box {
			width: 750rpx;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
			position: fixed;
			// #ifdef MP
			bottom: 0;
			// #endif
			// #ifndef MP
			bottom: 100rpx;
			left: 0;
			// #endif
			
		
			.statistics {
				width: 750rpx;
				// padding: 0rpx 0 0 2rpx;
				height: 98rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
		
				.statistics-left {
					width: 120rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
				}
		
				.statistics-right {
					width: 600rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
		
					.btn {
						width: 218rpx;
						height: 98rpx;
						background: #FBBC02;
						text-align: center;
						line-height: 98rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #313133;
						margin-left: 40rpx;
					}
		
					text {
						font-size: 30rpx;
						font-weight: 400;
						color: #313133;
					}
		
					.text-color {
						color: rgba(242, 18, 18, 1);
					}
				}
			}
		
		}
	}
	
</style>
